<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>校园BBS</title>
    <link rel="icon" href="../assets/QQ.ico">
    <!--element-ui的样式-->
    <link rel="stylesheet" href="../plugins/element-ui/index.css"/>
    <!-- 引入样式  -->
    <link rel="stylesheet" href="../css/login.css"/>
    <link rel="stylesheet" href="../css/base.css"/>
    <link rel="stylesheet" href="../css/animate.min.css"/>
</head>
<body>
<div id="app" style="width: 100vw;height: 100vh">
    <div class="base">
        <!-- 注册登录界面 -->
        <div class="loginAndRegist">
            <!--登录表单-->
            <el-form ref="loginUser" :model="loginUser" class="loginArea" :rules="loginRules">
                <transition
                        name="animate__animated animate__bounce"
                        enter-active-class="animate__fadeInUp"
                        leave-active-class="animate__zoomOut"
                        appear
                >
                    <!-- 标语 -->
                    <div v-show="isShow" class="title">
                        登录
                    </div>
                </transition>
                <transition
                        name="animate__animated animate__bounce"
                        enter-active-class="animate__fadeInUp"
                        leave-active-class="animate__zoomOut"
                        appear
                >
                    <!-- 密码框和用户名框 -->
                    <div v-show="isShow" class="pwdArea">
                        <el-form-item prop="username"
                                      style="flex: 1;justify-content: center;display: flex;align-items: center">
                            <el-input class="username" v-model="loginUser.username" style="width: 200px"
                                      placeholder="用户名" maxlength="20"></el-input>
                        </el-form-item>
                        <el-form-item prop="password"
                                      style="flex: 1;justify-content: center;display: flex;align-items: center">
                            <el-input placeholder="密码" v-model="loginUser.password" style="width: 200px"
                                      minlength="8" maxlength="16" show-password></el-input>
                        </el-form-item>
                    </div>
                </transition>
                <transition
                        name="animate__animated animate__bounce"
                        enter-active-class="animate__fadeInUp"
                        leave-active-class="animate__zoomOut"
                        appear
                >
                    <!-- 登录注册按钮 -->
                    <el-form-item class="btnArea">
                        <el-button :loading="loading" type="success" round
                                   style="background-color: #257B5E;letter-spacing: 5px"
                                   @click.native.prevent="handleLogin">
                            <span v-if="!loading">登录</span>
                            <span v-else="loading">登录中...</span>
                        </el-button>
                    </el-form-item>
                </transition>
            </el-form>
            <!-- 注册表单 -->
            <el-form class="registArea" ref="regUser" :model="regUser" :rules="regRules">
                <transition
                        name="animate__animated animate__bounce"
                        enter-active-class="animate__fadeInUp"
                        leave-active-class="animate__zoomOut"
                        appear
                >
                    <!--  注册表头-->
                    <div v-show="!isShow" class="rigestTitle">
                        用户注册
                    </div>
                </transition>
                <transition
                        name="animate__animated animate__bounce"
                        enter-active-class="animate__fadeInUp"
                        leave-active-class="animate__zoomOut"
                        appear
                >
                    <!--            注册表单-->
                    <div v-show="!isShow" class="registForm">
                        <el-form-item prop="regUsername"
                                      style="flex: 1;display: flex;justify-content: center;align-items: center">
                            用&nbsp;&nbsp;&nbsp;户&nbsp;&nbsp;&nbsp;名:
                            <el-input
                                    placeholder="请输入用户名"
                                    v-model="regUser.regUsername"
                                    style="width: 165px;margin-left: 10px"
                                    clearable
                            >
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="regPwd"
                                      style="flex: 1;display: flex;justify-content: center;align-items: center">
                            密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:
                            <el-input placeholder="请输入密码,至少8-16个字符，至少1个大写字母，1个小写字母和1个数字"
                                      style="width: 165px;margin-left: 10px"
                                      v-model="regUser.regPwd" show-password minlength="8" maxlength="16"></el-input>
                        </el-form-item>
                        <el-form-item prop="regRePwd"
                                      style="flex: 1;display: flex;justify-content: center;align-items: center;">
                            确&nbsp;认&nbsp;密&nbsp;码:
                            <el-input placeholder="请再次输入密码" style="width: 165px;margin-left: 10px"
                                      v-model="regUser.regRePwd" show-password minlength="8" maxlength="16"></el-input>
                        </el-form-item>
                        <el-form-item prop="imgName" style="flex: 1;display: flex;align-items: center">
                            头像上传:
                            <template>
                                <el-upload
                                        class="avatar-uploader"
                                        action="/common/upload"
                                        :show-file-list="false"
                                        :on-success="handleAvatarSuccess"
                                        :on-change="onChange"
                                        ref="upload"
                                >
                                    <img v-if="imgUrl" :src="imgUrl" class="avatar"></img>
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                            </template>
                        </el-form-item>
                    </div>
                </transition>
                <transition
                        name="animate__animated animate__bounce"
                        enter-active-class="animate__fadeInUp"
                        leave-active-class="animate__zoomOut"
                        appear
                >
                    <!--            注册按钮-->
                    <div v-show="!isShow" class="registBtn">
                        <el-button type="success" round style="background-color: #257B5E;letter-spacing: 5px"
                                   @click="handleRegister">注册
                        </el-button>
                    </div>
                </transition>
            </el-form>
            <!-- 信息展示界面 -->
            <div id="aaa" class="showInfo"
                 :style="{
             borderTopRightRadius:styleObj.bordertoprightradius,
             borderBottomRightRadius:styleObj.borderbottomrightradius,
             borderTopLeftRadius:styleObj.bordertopleftradius,
             borderBottomLeftRadius:styleObj.borderbottomleftradius,
             right:styleObj.rightDis
            }"
            >

                <transition
                        name="animate__animated animate__bounce"
                        enter-active-class="animate__fadeInUp"
                        leave-active-class="animate__zoomOut"
                        appear
                >
                    <!-- 没有用户输入用户名或者找不到用户名的时候 -->
                    <div v-show="isShow"
                         style="display: flex;flex-direction: column;align-items: center;justify-content: center;width: 100%;height: 100%">
                        <!-- 欢迎语 -->
                        <div style="flex: 2;display: flex;align-items: center;font-size: 22px;color: #FFFFFF;font-weight: bold">
                            欢迎登入小许的校园BBS系统
                        </div>
                        <!-- 欢迎图片 -->
                        <div style="flex: 2">
                            <el-button type="success" style="background-color:#257B5E;border: 1px solid #ffffff;" round
                                       @click="changeToRegister">还没有账户？点击注册
                            </el-button>
                        </div>
                    </div>
                </transition>
                <transition
                        name="animate__animated animate__bounce"
                        enter-active-class="animate__fadeInUp"
                        leave-active-class="animate__zoomOut"
                        appear
                >
                    <!-- 用户注册的时候展示信息 -->
                    <div v-show="!isShow"
                         style="display: flex;flex-direction: column;align-items: center;justify-content: center;width: 100%;height: 100%">
                        <!-- 欢迎语 -->
                        <div style="flex: 2;display: flex;align-items: center;font-size: 22px;color: #FFFFFF;font-weight: bold">
                            欢迎注册
                        </div>
                        <!-- 欢迎图片 -->
                        <div style="flex: 2">
                            <el-button type="success" style="background-color:#257B5E;border: 1px solid #ffffff;" round
                                       @click="changeToLogin">已有账户？点击登录
                            </el-button>
                        </div>
                    </div>
                </transition>
            </div>
        </div>

    </div>
</div>


<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../plugins/vue.js"></script>
<!-- 引入组件库 -->
<script src="../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../plugins/axios.min.js"></script>
<script src="../js/request.js"></script>
<script src="../api/login.js"></script>
<!--&lt;!&ndash; 引入vue-router &ndash;&gt;-->
<!--<script src="../plugins/vue-router.js"></script>-->

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                loginUser: {
                    username: '',
                    password: ''
                },
                loading: false,
                imgUrl:'',
                regUser: {
                    regUsername: '',
                    regRePwd: '',
                    regPwd: '',
                    imgName: '',
                },
                submitForm:{
                    userName:'',
                    userPass:'',
                    head:'',
                    gender:'',
                },
                styleObj: {
                    bordertoprightradius: '15px',
                    borderbottomrightradius: '15px',
                    bordertopleftradius: '0px',
                    borderbottomleftradius: '0px',
                    rightDis: '0px'
                },
                isShow: true,
            }
        },
        computed: {
            loginRules() {
                const validateUsername = (rule, value, callback) => {
                    if (value == "") {
                        callback(new Error("请输入账号"))
                    } else if (value.length > 20 || value.length < 3) {
                        callback(new Error("账号长度应是3-20"))
                    } else {
                        callback()
                    }
                }
                const validatePassword = (rule, value, callback) => {
                    if (value.length < 8) {
                        callback(new Error('密码必须在8位以上'))
                    } else {
                        callback()
                    }
                }
                return {
                    'username': [{'validator': validateUsername, 'trigger': 'blur'}],
                    'password': [{'validator': validatePassword, 'trigger': 'blur'}]
                }
            },
            regRules() {
                var pwd = null
                const validateUsername = (rule, value, callback) => {
                    if (value == "") {
                        callback(new Error("请输入账号"))
                    } else if (value.length > 20 || value.length < 3) {
                        callback(new Error("账号长度应是3-20"))
                    } else {
                        callback()
                    }
                }
                const validatePassword = (rule, value, callback) => {
                    let reg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/
                    if (value == '') {
                        callback(new Error('请输入密码'))
                    } else if (reg.test(value)) {
                        pwd = value
                        callback()
                    } else {
                        callback(new Error('密码格式错误,至少8-16个字符，至少1个大写字母，1个小写字母和1个数字'))
                    }
                }
                const validateRePassword = (rule, value, callback) => {
                    if (value == '') {
                        callback(new Error('请再次输入密码'))
                    } else if (pwd === value) {
                        callback()
                    } else {
                        callback(new Error('两次密码输入不一致，请检查!'))
                    }
                }
                return {
                    'regUsername': [{'validator': validateUsername, 'trigger': 'blur'}],
                    'regPwd': [{'validator': validatePassword, 'trigger': 'blur'}],
                    'regRePwd': [{'validator': validateRePassword, 'trigger': 'blur'}],
                }
            }

        },
        methods: {
            onChange(file) {
                if (file) {
                    const suffix = file.name.split('.')[1]
                    const size = file.size / 1024 / 1024 < 2
                    if (['png', 'jpeg', 'jpg'].indexOf(suffix) < 0) {
                        this.$message.error('上传图片只支持 png、jpeg、jpg 格式！')
                        this.$refs.upload.clearFiles()
                        return false
                    }
                    if (!size) {
                        this.$message.error('上传文件大小不能超过 2MB!')
                        return false
                    }
                    return file
                }
            },

            // handleAvatarSuccess (response, file, fileList) {
            //     // 拼接down接口预览
            //     if(response.code === 0 && response.msg === '未登录'){
            //         window.top.location.href = '../login/login.html'
            //     }else{
            //         this.imageUrl = `/common/download?name=${response.data}`
            //         this.ruleForm.image = response.data
            //     }
            // },
            handleAvatarSuccess(response, file, fileList) {
                // 拼接down接口预览
                this.imgUrl = `/common/download?name=${response.data}`
                this.regUser.imgName = response.data
            },
            changeToRegister() {
                this.styleObj.bordertoprightradius = '0px'
                this.styleObj.borderbottomrightradius = '0px'
                this.styleObj.bordertopleftradius = '15px'
                this.styleObj.borderbottomleftradius = '15px'
                this.styleObj.rightDis = '50%'
                this.isShow = !this.isShow
            },
            changeToLogin() {
                this.styleObj.bordertoprightradius = '15px'
                this.styleObj.borderbottomrightradius = '15px'
                this.styleObj.bordertopleftradius = '0px'
                this.styleObj.borderbottomleftradius = '0px'
                this.styleObj.rightDis = '0px'
                this.isShow = !this.isShow
            },
            //用户登录
            async handleLogin() {
                this.$refs.loginUser.validate(async (valid) => {
                    if (valid) {
                        this.loading = true
                        this.submitForm.userName=this.loginUser.username
                        this.submitForm.userPass=this.loginUser.password
                        let res = await loginApi(this.submitForm)
                        if (String(res.code) === '1') {
                            localStorage.setItem('userInfo', JSON.stringify(res.data))
                            window.location.href = './index.html'
                        } else {
                            this.$message.error(res.msg)
                            this.loading = false
                        }
                    }
                })
            },
            //用户注册
            async handleRegister() {
                this.$refs.regUser.validate(async (valid) => {
                    if (valid) {
                        this.loading = true
                        this.submitForm.userName=this.regUser.regUsername
                        this.submitForm.userPass=this.regUser.regPwd
                        this.submitForm.head=this.regUser.imgName
                        let res = await regApi(this.submitForm)
                        if (String(res.code) === '1') {
                            localStorage.setItem('userInfo', JSON.stringify(res.data))
                            window.location.href = './index.html'
                        } else {
                            this.$message.error(res.msg)
                            this.loading = false
                        }
                    }
                })
            },
        }
    })
</script>
</body>
</html>